<template>
  <div class="common-choose-dialog-wrap">
    <span
      class="label"
      @click="showDialog"
      :style="{ '--theme-color': systemInfo.theme }"
      v-if="!tempVal"
      >请选择</span
    >

    <el-tag
      v-else
      style="cursor: pointer"
      type="success"
      closable
      @close="handleClose"
      @click="showDialog"
      >{{ tempVal }}</el-tag
    >

    <common-choose-dialog
      ref="ChooseDialog"
      title="人员"
      @submitForm="submitForm"
    >
      <common-tree
        slot="tree"
        :isRequest="isRequest"
        v-loading="treeLoading"
        node-key="id"
        :treeData="treeData"
        :current-node-key="currentNodeKey"
        :isShowFilter="false"
        is-slot
        @handleNodeClick="handleNodeClick"
      >
        <div
          style="width: 100%"
          slot-scope="{ scope }"
          :class="{ 'e-t-content': !scope.data.freeze }"
        >
          <common-carousel-text
            :content="scope.node.label"
            :index="scope.node.id"
            :font-size="14"
          >
          </common-carousel-text>
        </div>
      </common-tree>

      <common-search slot="search" @search="handleQuery" @reset="resetQuery">
        <el-form
          @submit.native.prevent
          :model="queryForm"
          ref="queryForm"
          :inline="true"
          label-width="50px"
        >
          <el-form-item label="用户名">
            <common-input
              v-model="queryForm.userName"
              clearable
              @enter="handleQuery"
            />
          </el-form-item>
        </el-form>
      </common-search>

      <common-table
        v-loading="listLoading"
        slot="content"
        ref="allList"
        :data="allList"
      >
        <el-table-column width="55" align="center">
          <template slot-scope="scope">
            <el-radio-group v-model="isCheckValue" @change="changeRadio">
              <el-radio :label="scope.row.userName">{{ "" }}</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="用户名" align="left" prop="userName" />
        <el-table-column label="姓名" align="left" prop="nickName" />
        <el-table-column label="手机" align="left" prop="phone" />
      </common-table>
      <pagination
        slot="pagination"
        v-show="total > 0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="handleList"
      />
    </common-choose-dialog>
  </div>
</template>

<script>
import HandleChooseDialog from "@/mixins/modules/HandleChooseDialog";
import BaseList from "@/mixins/BaseList";
import { _deepClone } from "@/utils";
import { user_list, dept_select } from "@/api/management/usercenter/user.js";
import { decode, encode } from "@/utils/aesUtils";
import Utils from "@/utils";
import { mapGetters } from "vuex";

export default {
  name: "chooseDialog",
  mixins: [HandleChooseDialog, BaseList],
  props: {
    selectValue: {
      type: String,
    },
  },
  data() {
    return {
      dialogShow: false,
      treeData: [],
      currentNodeKey: "",
      selectedData: [],
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        status: 0,
        deptId: null,
      },
      total: 0,
      isCheckValue: "",
      key: "userName",
      selectRow: null,
      tempVal: null,
      departName: "",
    };
  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
  watch: {
    //设置默认搜索人员
    selectValue: {
      handler: function (val) {
        if (val) {
          this.tempVal = _deepClone(this.selectValue);
          // this.isCheckValue = val;
          // this.queryForm.realname = val;
          // this.handleQuery();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //打开弹窗
    showDialog() {
      this.$emit("showDialog");
      this.$refs.ChooseDialog.show();
      if (this.selectValue) this.tempVal = _deepClone(this.selectValue);
      this.isCheckValue = _deepClone(this.tempVal);
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        status: 0,
        deptId: null,
      };
      this.handleTreeList();
    },
    //树节点点击事件
    setQueryForNode(info) {
      this.queryForm.userName = "";
      this.departName = info.data.departName;
      this.queryForm.deptId = info.data.id || info.data.key || info.data.value;
      console.log(this.queryForm.deptId);
    },
    //重置筛选条件
    resetForm() {
      this.queryForm.userName = "";
    },
    //弹窗提交事件
    submit() {
      if (!this.selectRow && !this.isCheckValue) {
        this.isClosed = false;
        return this.$GlobalErrorConfirm("添加失败", "请选择人员！");
      }
      this.isClosed = true;
      this.tempVal = _deepClone(this.isCheckValue);
      this.$emit(
        "submitDialog",
        this.selectRow,
        this.departName ? this.departName : this.treeData[0].departName
      );
    },
    //清除选中数据
    handleClose() {
      this.isCheckValue = "";
      this.tempVal = "";
      this.selectRow = null;
      this.$emit("clearInfo");
    },

    //部门数据
    getTreeList() {
      return new Promise((resolve, reject) => {
        dept_select({}).then((res) => {
          if (res && res.code === 200) {
            // if(res.rows)
            let data = res.data && res.data.length ? res.data : [];
            this.queryForm.deptId =
              data[0]?.id || data[0]?.key || data[0]?.value || "";

            this.handleList();
            resolve(data);
          } else {
            this.queryForm.id = "";
            reject();
          }
        });
      });
    },
    //选择列表数据
    getList() {
      console.log(this.currentNodeKey);
      return new Promise((resolve, reject) => {
        user_list(this.queryForm).then((res) => {
          if (res && res.code === 200) {
            let list = res.rows.reduce((r, c) => {
              r.push({
                ...c,
                phone: Utils.phoneEncryption(decode(c.phonenumber)),
                decodeEmail: Utils.emailEncryption(decode(c.email)),
              });
              return r;
            }, []);
            let total = res.total;
            resolve({ list, total });
          } else {
            this.allList = [];
            this.total = 0;
            this.handleListTips(res);
            reject();
          }
        });
      });
    },
  },
  mounted() {
    // this.handleTreeList();
  },
};
</script>

<style scoped lang="scss">
.common-choose-dialog-wrap {
  .label {
    font-size: 14px;
    color: var(--theme-color);
    cursor: pointer;
  }

  .name-list {
    cursor: pointer;

    .el-tag {
      margin-right: 4px;
    }
  }
}
</style>
